<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import prileInfo from '@/components/prile-info.vue'
//import lQrcode from '@/pages/equipment/components/l-qrcode/l-qrcode.vue'
import { useDeviceStore } from '@/stores'
import { getQrCodeApi } from '@/services/equipment'
const deviceStore = useDeviceStore()
const props = defineProps<{
  deviceNum: string
}>()

const show = ref(false)
//const val = ref('')

const baseUrl = 'https://szsensing.com:8581/'
const qrimg = ref('')
const showqr = async (deviceNum: string) => {
  /* val.value = JSON.stringify({
    deviceNum,
  }) */
  const res = await getQrCodeApi(deviceNum)
  qrimg.value = baseUrl + res.data
  show.value = true
}
const getHarDwareDetail = () => {
  deviceStore.getHarDwareDetail(props.deviceNum)
}
onLoad(() => {
  getHarDwareDetail()
})
const editinfo = () => {
  uni.navigateTo({
    url: '/pagesDevice/edit-equipment/edit-equipment',
  })
}

const calibrateDevice = () => {
  
  uni.navigateTo({
    url: '/pagesDevice/bt-device-list/bt-device-list?type=calibrate',
  })
}
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<template>
  <view class="content">
    <view class="title">
      <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon>
      {{ '设备详情' }}
    </view>

    <prile-info
      :picture="deviceStore?.HarDwareDetail!.picture"
      :deviceNum="deviceStore?.HarDwareDetail!.deviceNum"
      :id="deviceStore?.HarDwareDetail!.id"
      :name="deviceStore?.HarDwareDetail!.name"
      :key="deviceStore?.HarDwareDetail!.id"
      :delete="true"
      @showqr="showqr"
    ></prile-info>
    <view class="device-info">
      <u-line direction="col" color="#4b8de8" length="26.923rpx"></u-line>
      <view>{{ '设备信息' }}</view>
    </view>
    <view class="device-info-box">
      <view class="device-info-item">
        <view class="device-info-item-title">型号</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.model }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">设备号</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.deviceNum }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">WIFI信息</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.wifi }}</view>
      </view>
      <!-- <view class="device-info-item">
        <view class="device-info-item-title">版本</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.hver }}</view>
      </view> -->
    </view>
    <view class="device-info">
      <u-line direction="col" color="#4b8de8" length="26.923rpx"></u-line>
      <view>设备信息</view>
      <view class="edit"
        ><u-button type="primary" color="#3780A6" size="mini" @click="editinfo()"
          >编辑资料</u-button
        >
      </view>
    </view>
    <view class="device-info-box">
      <view class="device-info-item">
        <view class="device-info-item-title">昵称</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.name }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">性别</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwaresex }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">年龄</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.age + '岁' }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">体重</view>
        <view class="device-info-item-content"
          >{{ deviceStore?.HarDwareDetail?.weight + 'kg' }}
        </view>
      </view>
    </view>
    <view class="button_box">
      <u-button type="primary" shape="circle" color="#3780A6" icon="wifi"> 设置网络 </u-button>
    </view>
    <view class="button_box">
      <u-button
        type="primary"
        shape="circle"
        color="#3780A6"
        icon="setting"
        @click="calibrateDevice"
        >校准设备</u-button
      >
    </view>
    <u-popup :show="show" mode="center" @close="show = false" :zoom="false">
      <!-- <l-qrcode
        :value="val"
        :icon="imgsrc"
        size="384.615rpx"
        :icon-size="40"
        bgColor="rgb(245,245,245)"
      ></l-qrcode> -->
      <img :src="qrimg" alt="" style="width: 384.615rpx; height: 384.615rpx" />
    </u-popup>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: url(@/static/starry3.jpg) no-repeat;
    background-size: contain;
    .title {
      position: relative;
      margin-top: 115.385rpx;
      margin-bottom: 28.846rpx;
      font-size: 34.615rpx;
      color: #ffff;
      text-align: center;
      .u-icon {
        position: absolute;
        left: 3%;
      }
    }
    .device-info {
      display: flex;
      margin: 28.846rpx auto;
      width: 690.385rpx;
      font-weight: 700;
      .u-line {
        border-left-width: 13.462rpx !important ;
        margin: 9.615rpx 19.231rpx 0 0 !important ;
      }
      .edit {
        height: 28.846rpx;
        margin-left: auto;
      }
    }
    .device-info-box {
      margin: 0 auto;
      width: 690.385rpx;
      height: 298.077rpx;
      background-color: #f4f3f8;
      padding: 38.462rpx 28.846rpx;
      box-sizing: border-box;
      font-size: 26.923rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .device-info-item {
        display: flex;
        flex: 1;
        margin-bottom: 23.077rpx;
        .device-info-item-title {
          width: 201.923rpx;
        }
      }
    }
    .button_box {
      width: 634.615rpx;
      height: 76.923rpx;
      margin-top: 38.462rpx;
      align-self: center;
    }
    .u-safe-bottom {
      display: none !important ;
    }
  }
}
</style>
